<template>
  <div>
    <Tou></Tou>
    <Second></Second>
    <div style="width: 1400px;height: 100px;background-color: #EEF1F8;margin: 10px auto;border: 1px solid #418CCD;display: flex">
      <div style="width: 100px;height: 100px;border: 1px solid #418CCD">
        <template>
          <el-radio v-model="radio" label="1" style="display: flex;top: 20px;left: 20px">单程</el-radio><br>
          <el-radio v-model="radio" label="2" style="display: flex;top: 20px;left: 20px">往返</el-radio>
        </template>
      </div>
      <span style="font-size: 14px;line-height: 100px;margin-left: 20px">出发地</span>
      <el-select v-model="start" placeholder="城市" style="width: 150px;line-height: 100px;height: 10px;margin-left: 10px;">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <img @click="huan" src="../img/p3.png" alt="" style="width: 30px;height: 30px;margin-top: 35px;margin-left: 20px">
      <span style="font-size: 14px;line-height: 100px;margin-left: 20px">目的地</span>
      <el-select v-model="end" placeholder="城市" style="width: 150px;line-height: 100px;height: 10px;margin-left: 10px;">
        <el-option
          v-for="item in options2"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <span style="font-size: 14px;line-height: 100px;margin-left: 20px">出发日</span>
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="选择日期"
        style="width: 150px;line-height: 100px;height: 10px;margin-left: 10px">
      </el-date-picker>
      <span style="font-size: 14px;line-height: 100px;margin-left: 20px">返程日</span>
      <el-date-picker
        v-model="value2"
        type="date"
        placeholder="选择日期"
        style="width: 150px;line-height: 100px;height: 10px;margin-left: 10px">
      </el-date-picker>
      <div>
        <template>
          <el-radio v-model="radio1" label="1" style="display: flex;top: 20px;left: 20px">普通</el-radio><br>
          <el-radio v-model="radio1" label="2" style="display: flex;top: 20px;left: 20px">学生</el-radio>
        </template>
      </div>
      <br>
      <el-button  style="width: 100px;height: 40px;margin-top: 30px;margin-left: 50px;background-color: #F58100;color: white;border-radius: 10px" @click="selectCar">查询</el-button>
    </div>
    <div style="width: 1400px;background-color: #EEF1F8;margin: 10px auto;border: 1px solid #418CCD;display: flex">
      <template>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :default-sort="{ prop: 'carStarttime', order: 'ascending' }"
        >
          <el-table-column
            prop="carName"
            label="车次"
            width="70"
          >
          </el-table-column>
          <el-table-column
            prop="carStartaddr"
            label="出发站"
            width="70">
          </el-table-column>
          <el-table-column
            prop="carStarttime"
            label="出发时间">
          </el-table-column>
          <el-table-column
            prop="carEndaddr"
            label="目的地"
            width="70">
          </el-table-column>
          <el-table-column
            prop="carEndtime"
            label="到达时间">
          </el-table-column>

          <el-table-column
            prop="lasted"
            label="历时">
          </el-table-column>

          <el-table-column
            prop="first"
            label="一等座">

            <template slot-scope="scope">
              <!-- 自定义内容，可以是一个按钮 -->
              <el-button @click="handleClick(scope.row)">{{ scope.row.first }}</el-button>
            </template>

          </el-table-column>
          <el-table-column
            prop="second"
            label="二等座">

            <template slot-scope="scope">
              <!-- 自定义内容，可以是一个按钮 -->
              <el-button @click="sec(scope.row)">{{ scope.row.second }}</el-button>
            </template>

          </el-table-column>
          <el-table-column
            prop="no"
            label="无座">

            <template slot-scope="scope">
              <!-- 自定义内容，可以是一个按钮 -->
              <el-button @click="No(scope.row)">{{ scope.row.no }}</el-button>
            </template>

          </el-table-column>
          <el-table-column
            prop="carInfo"
            label="状态"
          >
            <template slot-scope="scope">
              <span v-html="formatCarInfo(scope.row)"></span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDing(scope.row)">预定</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
import Tou from "./tou.vue";
import Second from "./second.vue";

export default {
  name: "car",
  components: {Second, Tou},
  data(){
    return{
      color:'',
      radio: '1',
      radio1: '1',
      start:'',
      start1:'',
      end:'',
      end1:'',
      time2:'',
      value1:'',
      value2:'',
      tableData: [{
        carId: '1',
        carStarttime: '2023-11-05 08:00:00',
        carStartaddr: '西安',
        carEndtime:'2023-11-05 13:00:00',
        carEndaddr:'北京',
        carName:'D2502',
        carFirst:'100',
        carSec:'200',
        carNo:'90',
        carInfo:'准点',
        carPrice:'350',
        first:'',
        second:'',
        no:'',

        showBlock: false,
        lasted:'',

      }],
      options1: [],
      options2: [],
    }
  },
  methods:{
    handleDing(row) {
      // 使用 $router.push 导航到 tickets 页面，并将选定的行数据作为参数传递
      this.$router.push({
        path: '/tickets',
        query: { rowData: JSON.stringify(row) }
      });
    },
    handleClick(row) {
      if (row.first === '有') {
        // 假设价格是从后端获取的，你可以在这里设置具体的价格
        row.first = row.carPrice; // 假设价格是 350
      } else {
        row.first = '有';
      }
    },
    sec(row){
      if (row.second === '有') {
        // 假设价格是从后端获取的，你可以在这里设置具体的价格
        row.second =  Math.floor(row.carPrice * 0.8);  // 假设价格是 350
      } else {
        row.second = '有';
      }
    },
    No(row){
      if (row.no === '有') {
        // 假设价格是从后端获取的，你可以在这里设置具体的价格
        row.no =  Math.floor(row.carPrice * 0.8);  // 假设价格是 350
      } else {
        row.no = '有';
      }
    },
    selectCar(){
      if (!this.start) {
        // 检查是否已选择出发地、到达地和日期
        this.$message.error('请选择出发地');
      }else if (!this.end){
        this.$message.error('请选择到达地');
      }else if (!this.value1){
        this.$message.error('请选择时间');
      } else {
      this.value1=this.formatDate(this.value1)
        this.$axios.get('/car/findByStarttime', {
          params: {
            carStartaddr: this.start,
            carEndaddr: this.end,
            carStarttime: this.value1
          }
        })
          .then(res => {
            this.tableData = res.data.data
            // 获取当前时间
            const currentTime = new Date();
            // 遍历tableData中的数据
            this.tableData.forEach(item => {
              //格式化出发时间
              const start1 = new Date(item.carStarttime);
              // 使用 setHours 方法将时间增加8小时并赋值给 item.carStarttime
              start1.setHours(start1.getHours() + 8);
              // 更新 item.carStarttime
              item.carStarttime = start1;
              const date = new Date(item.carStarttime);
              // 格式化日期时间为 'yyyy-MM-dd HH:mm:ss' 格式
              const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
              item.carStarttime = formattedDate;

              //格式化到站时间
              const end = new Date(item.carEndtime);
              // 使用 setHours 方法将时间增加8小时并赋值给 item.carStarttime
              end.setHours(end.getHours() + 8);
              // 更新 item.carStarttime
              item.carEndtime = end;
              const date1 = new Date(item.carEndtime);
              // 格式化日期时间为 'yyyy-MM-dd HH:mm:ss' 格式
              const formattedDate1 = `${date1.getFullYear()}-${(date1.getMonth() + 1).toString().padStart(2, '0')}-${date1.getDate().toString().padStart(2, '0')} ${date1.getHours().toString().padStart(2, '0')}:${date1.getMinutes().toString().padStart(2, '0')}:${date1.getSeconds().toString().padStart(2, '0')}`;
              item.carEndtime = formattedDate1;

              //计算历时时间
              const starttime = new Date(item.carStarttime);
              const endTime = new Date(item.carEndtime);
              const timeDifferent = endTime - starttime;
              const hours = Math.floor(timeDifferent / 3600000); // 1 hour = 3600000 milliseconds
              const minutes = Math.round((timeDifferent % 3600000) / 60000); // 1 minute = 60000 milliseconds
              item.lasted = `${hours}小时${minutes}分钟`;


              // 解析车辆的开始时间
              const startTime = new Date(item.carStarttime);
              // 计算差值（以毫秒为单位）
              const timeDiff = startTime - currentTime;
              // 如果差值大于15分钟（15分钟 = 900000毫秒）
              if (timeDiff > 900000) {
                item.carInfo = '正在候车';
              } else if (timeDiff > 0 && timeDiff <= 900000) {
                item.carInfo = '正在检票';
              } else if (timeDiff < 0) {
                item.carInfo = '停止检票';
              }
              //判断是否有票
              // 判断是否有票
              if (item.carFirst > 50) {
                console.log(item.carFirst);
                item.first = '有';
              }else if (item.carFirst <= 50){
                item.first= item.carFirst;
              }
              // 判断是否有第二种票
              if (item.carSec > 50) {
                item.second = '有';
              }else if (item.carSec <= 50){
                item.second= item.carSec;
              }
              if (item.carNo > 50){
                item.no='有';
              }else if (item.carNo <= 50){
                item.no= item.carNo;
              }
            });
          });
      }
    },
    //处理日期格式
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    loadStratAddr(){
      this.$axios.get('/car/findAllStarName').then(res=>{
        // 清空 options 数组
        this.options1 = [];
        // 遍历数据并将其添加到 options 数组
        res.data.data.forEach(item => {
          this.options1.push({ value: item, label: item });
        });
      })
    },
    loadEndAddr(){
      this.$axios.get('/car/findAllEndName').then(res=>{
        // 清空 options 数组
        this.options2 = [];
        // 遍历数据并将其添加到 options 数组
        res.data.data.forEach(item => {
          this.options2.push({ value: item, label: item });
        });
      })
    },
    huan(){
      var t=this.start;
      this.start = this.end;
      this.end = t;
    },
    loadCar(){
      this.$axios.get('/car/findByStarttime',{
        params:{
          carStartaddr:this.start1,
          carEndaddr:this.end1,
          carStarttime:this.time2
        }
      })
        .then(res=>{
          console.log(res.data.data)
          this.tableData = res.data.data
          // 获取当前时间
          const currentTime = new Date();
          // 遍历tableData中的数据
          this.tableData.forEach(item => {
            //格式化出发时间
            const start1 = new Date(item.carStarttime);
            // 使用 setHours 方法将时间增加8小时并赋值给 item.carStarttime
            start1.setHours(start1.getHours() + 8);
            // 更新 item.carStarttime
            item.carStarttime = start1;
            const date = new Date(item.carStarttime);
            // 格式化日期时间为 'yyyy-MM-dd HH:mm:ss' 格式
            const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
            item.carStarttime = formattedDate;

            //格式化到站时间
            const end = new Date(item.carEndtime);
            // 使用 setHours 方法将时间增加8小时并赋值给 item.carStarttime
            end.setHours(end.getHours() + 8);
            // 更新 item.carStarttime
            item.carEndtime = end;
            const date1 = new Date(item.carEndtime);
            // 格式化日期时间为 'yyyy-MM-dd HH:mm:ss' 格式
            const formattedDate1 = `${date1.getFullYear()}-${(date1.getMonth() + 1).toString().padStart(2, '0')}-${date1.getDate().toString().padStart(2, '0')} ${date1.getHours().toString().padStart(2, '0')}:${date1.getMinutes().toString().padStart(2, '0')}:${date1.getSeconds().toString().padStart(2, '0')}`;
            item.carEndtime = formattedDate1;

            //计算历时时间
            const starttime = new Date(item.carStarttime);
            const endTime = new Date(item.carEndtime);
            const timeDifferent = endTime - starttime;
            const hours = Math.floor(timeDifferent / 3600000); // 1 hour = 3600000 milliseconds
            const minutes = Math.round((timeDifferent % 3600000) / 60000); // 1 minute = 60000 milliseconds
            item.lasted = `${hours}小时${minutes}分钟`;

            // 解析车辆的开始时间
            const startTime = new Date(item.carStarttime);
            // 计算差值（以毫秒为单位）
            const timeDiff = startTime - currentTime;
            // 如果差值大于15分钟（15分钟 = 900000毫秒）
            if (timeDiff > 900000) {
              item.carInfo = '正在候车';
            }else if (timeDiff > 0 && timeDiff <=900000){
              item.carInfo = '正在检票';
            }else if (timeDiff < 0){
              item.carInfo = '停止检票';
            }
            // 判断是否有票
            if (item.carFirst > 50) {
              console.log(item.carFirst);
              item.first = '有';
            }
            // 判断是否有第二种票
            if (item.carSec > 50) {
              item.second = '有';
            }
            if (item.carNo > 50){
              item.no='有';
            }else if (item.carNo <= 50){
              item.no= item.carNo;
            }
          })
        });
    },
    formatCarInfo(row) {
      let color = ''; // 默认颜色为空
      if (row.carInfo === '正在候车') {
        color = 'green'; // 设置绿色
      } else if (row.carInfo === '正在检票') {
        color = 'orange'; // 设置橙色
      } else if (row.carInfo === '停止检票') {
        color = 'red'; // 设置红色
      }
      return `<span style="color: ${color};font-weight: bold">${row.carInfo}</span>`;
    },
  },

  mounted() {
    this.loadCar();
    this.loadStratAddr();
    this.loadEndAddr();
  },
  created() {
    const start = this.$route.query.start;
    const end = this.$route.query.end;
    const time2 = this.$route.query.time1;
    // 将获取的值赋给 /car 页面的属性
    this.start1 = start;
    this.end1 = end;
    this.time2 = time2;
  }
}
</script>

<style scoped>

</style>
